<template>
	<view>
		<uni-forms ref="baseForm" :modelValue="baseFormData" label-width='80px'>

			<view class="card method">
				<uni-forms-item label="维修方式:" required>
					<uni-data-checkbox v-model="baseFormData.type" :localdata="carmethods" />
				</uni-forms-item>
			</view>
			<view class="title">
				客户信息
			</view>
			<view class="card info">
				<uni-forms-item label="车主姓名:" required>
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入车主姓名" />
				</uni-forms-item>
				<uni-forms-item label="联系方式:" required>
					<uni-easyinput v-model="baseFormData.phone" placeholder="请输入联系方式" />
				</uni-forms-item>
				<uni-forms-item label="预约时间:">
					<uni-datetime-picker type="datetime" v-model="baseFormData.reservationTime" />
				</uni-forms-item>
				<uni-forms-item v-if="baseFormData.type==1" label="取车位置:" required>
					<uni-easyinput v-model="baseFormData.location" placeholder="请输入取车位置" />
				</uni-forms-item>
			</view>
			<view class="title">
				车辆信息
			</view>
			<view class="card info">
				<uni-forms-item label="车辆类型:" required>
					<uni-data-select v-model="baseFormData.carType" :localdata="range"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="车牌号:" required>
					<uni-easyinput v-model="baseFormData.carNum" placeholder="请输入车牌号" />
				</uni-forms-item>
			</view>
			<view class="title">
				整车图片：
			</view>
			<view class="card uploda">
				<l-upload @complete="vehicle" @remove="vehicleRemove"></l-upload>
			</view>
			<view class="title">
				维修部分图片：
			</view>
			<view class="card uploda">
				<l-upload @complete="repair" @remove="repairRemove"></l-upload>
			</view>

		</uni-forms>
		<view class="btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: '',
				carTypeList: [],
				baseFormData: {
					mid: '10',
					uid: '101',
					name: '',
					phone: '',
					reservationTime: '',
					type: 0,
					location: '',
					carType: '',
					carNum: ''
				},
				// 单选数据源
				carmethods: [{
					text: '到店维修',
					value: 0
				}, {
					text: '上门取车',
					value: 1
				}],
				range: [{
						value: 1,
						text: "e300l"
					},
					{
						value: 2,
						text: "s680"
					},
					{
						value: 3,
						text: "a6"
					},
				],
				imageList: [],
				//整车图片
				vehiclePhotos: '',
				// 维修部分图片
				repairPhotos: '',
				token:''
			}
		},
		methods: {
			vehicle(resp) {
				/* 				console.log('666666',resp.imageArr);
								console.log(this.vehiclePhotos) */
				/* 				var that = this
								console.log('Arr',resp.imageArr);
								resp.imageArr.forEach(function(element){
									console.log('arr',element);
									that.vehiclePhotos = element
								}) */
				this.vehiclePhotos = resp.imageArr.join(",")
				console.log('vehiclePhotos', this.vehiclePhotos);
			},
			repair(resp) {
				/* var that = this
				resp.imageArr.forEach(function(element){
					console.log('arr',element);
					that.repairPhotos = element
				}) */
				this.repairPhotos = resp.imageArr.join(",")
			},
			vehicleRemove(resp) {
				this.vehiclePhotos = resp.imageArr
			},
			repairRemove(resp) {
				this.repairPhotos = resp.imageArr
			},
			submit() {
				console.log('888888', this.vehiclePhotos);
				
				uni.request({
					url: 'http://localhost/dev-api/merchant/reservation',
					method: 'POST',
					header: {
						'Authorization': this.token
					},
					data: {
						uid: "10",
						mid: "101",
						type: this.baseFormData.type,
						name: this.baseFormData.name,
						phone: this.baseFormData.phone,
						reservationTime: this.baseFormData.reservationTime,
						location: this.baseFormData.location,
						carTypeId: this.baseFormData.carType,
						vehiclePhotos: this.vehiclePhotos,
						repairPhotos: this.repairPhotos,
						carNum: this.baseFormData.carNum
					},
					success(resp) {
						console.log('77777', resp)
						if (resp.data.code == 200) {
							uni.showToast({
								icon: 'success',
								title: '提交成功'
							})
							uni.navigateTo({
								url: "/pages/index/maintainDetail/reservation/reservationSuccess/reservationSuccess?id=" +
									resp.data.data
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '提交失败'
							})
						}
					}
				})

			},
			onLoad(event) {
				const token = uni.getStorageSync('Token');
				this.token = token
				uni.request({
					url: 'http://localhost/dev-api/user/type/list/',
					method: 'GET',
					header: {
						'Authorization': token
					},
					success(resp) {
						this.carTypeList = resp.data.rows
						console.log('555555555', this.carTypeList);
					}
				})
				console.log('222')
				this.carTypeList.forEach(item => {
					this.range[0].value = item.id,
						console.log('4444444444', this.range[0])
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.title {
		margin-left: 20px;
		font-size: 18px;
		height: 25px;
		line-height: 25px;
		margin-bottom: 5px;
	}

	.card {
		width: 313px;
		border-radius: 5px;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
		margin: auto;
		padding-left: 15px;
		padding-right: 20px;
		margin-bottom: 20px;
		padding-top: 10px;
	}

	.method {
		line-height: 36px;
		margin-top: 25px;
	}

	.info {
		padding-bottom: 4px;
	}

	.btn {
		width: 269px;
		height: 39px;
		border-radius: 18px;
		line-height: 39px;
		text-align: center;
		color: #fff;
		font-size: 16px;
		margin: auto;
		background-color: #1D6FFF;
	}

	.uploda {
		padding-bottom: 10px;
	}
</style>